<!--
 @description 自定义导航-目录
 @fileName Directory.vue
 @author zengqiongying
 @created 2023/09/05 11:15:47
-->
<template>
  <div class="define-tab-page" :style="{'padding-top':topHeight+'px'}">
    <div ref="top" class="define-tab-page-head">
      <MineHeader bg-color="" show-statusbar arrow :font-black="false">
        <SearchInput placeholder="搜索" @focus="handleSearch" />
      </MineHeader>
    </div>
    <div class="one-level-nav" :style="{'top':topHeight+'px'}" @touchstart.stop="" @touchend.stop="" @touchmove.stop="">
      <Scroll vertical class="scroll-height" :style="{'max-height':`calc(100vh - ${topHeight}px)`}" @click.native.stop>
        <div v-for="(item,i) in navList" :key="i" :class="['nav-item',{'active':firstNavId===item.id}]" @click="handleClickOneLevel(item)">
          <div class="name">{{ item.tabName }}</div>
        </div>
      </Scroll>
    </div>
    <div v-if="!!(activeNavData)" class="page-container">
      <div class="tab-fixed-box" :style="{'top':topHeight+'px'}">
        <div
          v-if="activeNavData.children && activeNavData.children.length"
          class="children-tabs"
        >
          <ScrollTab
            v-model="tabConfId"
            :list="activeNavData.children"
            value-key="id"
            label-key="tabName"
          />
        </div>
        <div class="sort-tab">
          <div
            v-for="(item,i) in sortList"
            :key="i"
            :class="['s-name',{'active':activeSort===item.code}]"
            @click="handleChangeSort(item.code)"
          >{{ item.name }}</div>
        </div>
      </div>
      <div class="directory-content-page" :style="{'padding-top':activeNavData.children && activeNavData.children.length>0?'108px':'48px'}">
        <ContentList
          :pic-show-type="lastNode.picShowType"
          :sort-key="activeSort"
          :content-ids="helpContentId.join(',')"
        />
      </div>
    </div>
  </div>
</template>

<script>
import MineHeader from '@/components/MineHeader'
import SearchInput from '@/components/SearchInput'
import Scroll from '@/components/Scroll'
import ScrollTab from '@/components/ScrollTab'
import ContentList from './components/DirectoryContent'

import { mapGetters } from 'vuex'
import { getTabTree, saveDefineNavigationBrowsingHistory } from '@/apis/index'
import { getDirectoryContentIds } from '@/apis/defineTab'
export default {
  name: 'DefineTabDirectory',
  components: { SearchInput, MineHeader, Scroll, ContentList, ScrollTab },
  data() {
    return {
      topHeight: 64,
      defineId: this.$route.params.id, // 类型定义ID
      pageTitle: this.$route.query.title || '', // 页面标题
      navList: [],
      tabConfId: '', // 末级目录ID
      firstNavId: '', // 当前所选一级导航
      helpContentId: [],
      sortList: [
        { code: 'lastUpdateTime', name: '最新' },
        { code: 'readNum', name: '最热' }
      ],
      activeSort: 'lastUpdateTime',
      brownHistoryId: ''
    }
  },
  computed: {
    ...mapGetters(['statusBarHeight']),
    activeNavData() {
      return this.navList.find(v => v.id === this.firstNavId)
    },
    lastNode() {
      if (this.activeNavData.id === this.tabConfId) return this.activeNavData
      const lastData = this.activeNavData.children.find(v => v.id === this.tabConfId)
      return lastData
    }
  },
  watch: {
    tabConfId(val, oldVal) {
      this.getContentId()
    }
  },

  created() {
    this.getNavList()
  },
  activated() {

  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.topHeight = this.$refs.top.offsetHeight
      }, 100)
    })
  },
  beforeRouteLeave(to, from, next) {
    const names = ['HelpCenterSearch', 'HelpCenterDetail']
    if (!names.includes(to.name)) {
      this.$removeKeepAliveCache(this)
    }
    next()
  },
  methods: {
    getNavList() {
      if (!this.defineId) return
      getTabTree(this.defineId).then(res => {
        this.navList = res.data || []
        // 自定义导航-目录：关联内容为帮助中心内容
        const tmpArr = this.navList.filter(v => v.gotoType === 'HELP_CENTER_DETAIL_LIST')
        if (tmpArr.length > 0) {
          this.handleClickOneLevel(tmpArr[0])
        }
        if (this.brownHistoryId !== this.defineId) {
          this.setBrowsingHistory({ id: this.defineId })
        }
      })
    },
    // 保存浏览记录
    setBrowsingHistory({ id, name }) {
      if (!id) return
      const params = { tabDefineId: id, tabDefineName: name, type: 3 }
      saveDefineNavigationBrowsingHistory(params).then(res => {
        this.brownHistoryId = id
      })
    },
    handleSearch() {
      // this.$router.push({
      //   path: '/search/product'
      // })
      this.$router.push({ name: 'HelpCenterSearch', query: { defineId: this.defineId }})
    },
    handleClickOneLevel(d) {
      this.firstNavId = d.id
      this.tabConfId = (d.children && d.children.length) ? d.children[0].id : d.id
    },
    async getContentId() {
      this.helpContentId = await getDirectoryContentIds(this.tabConfId)
    },
    handleChangeSort(type) {
      if (this.activeSort === type) return
      this.activeSort = type
    }
  }
}

</script>
<style lang='less' scoped>
.define-tab-page-head{
  position: fixed;
  left: 0;
  top: 0;
  width:100%;
  z-index: 99;
  background: url(~@/assets/my/bg-header.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  /deep/ .search-input{
    position: relative;
    margin-left: 10px;
    flex: 1;
    .search{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      margin-left: -20px;
    }
    .search-value{
      background: transparent;
      text-align: center;
      font-size: 14px;
      padding-left: 10px;
    }
  }
}

.define-tab-page{
  height: 100vh;
  box-sizing: border-box;
}
.one-level-nav{
  position: fixed;
  z-index:9;
  left: 0;
  bottom:0;
  width:90px;
  background: #fff;
  border-right: 1px solid #f3f3f3;
  box-sizing: border-box;
  .nav-item{
    height: 56px;
    padding:0 10px;//16px
    align-items: center;
    color: #333333;
    font-size: 14px;
    display: flex;
    align-items: center;
    .icon{
      width: 24px;
      height: 24px;
      line-height: 1;
      overflow: hidden;
      margin-right: 8px;
      font-size: 24px;
    }
    .name{
      font-weight: bold;
      // white-space: nowrap;
    }
    &.active{
      color:#00C8B4;
      .icon{
        color:#00C8B4;
      }
    }
  }
}
.page-container{
  padding-left:90px;
  position: relative;
}
.scroll-height{
  background-color: #fff;
  box-sizing: border-box;
}
.tab-fixed-box{
  position: fixed;
  left: 90px;
  right: 0;
  z-index: 9;
}
.children-tabs{
  height: 60px;
  padding: 16px 0;
  background: #fff;
  box-sizing: border-box;
}

.sort-tab{
  position: relative;
  width: 100%;
  height: 48px;
  padding: 15px 10px;
  box-sizing: border-box;
  background: #F5F6F7;
  display: flex;
  align-items: center;
  .s-name{
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    padding:  0 6px;
    &.active{
      color: #00C8B4;
    }
  }
}
</style>
